<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>分类参数</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="height: 100%">
      <el-alert
        title="注意：只允许为第三级分类设置相关参数"
        type="warning">
      </el-alert>
      选择商品分类：
      <el-cascader
        v-model="value"
        :options="attrs"
        :props=catePropsl
        expand-trigger="hover"
        @change="handleChange"></el-cascader>
      <!--  弹出框那里-->
      <el-dialog :visible.sync="dialogFormVisible" title="收货地址">
        <el-form :model="form">
          <el-form-item label="添加动态属性">
            <el-input v-model="form.attr_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </div>
      </el-dialog>
      <el-tabs v-model="activeName" :before-leave="beforeleave" @tab-click="handleClick">
        <el-button style="float: left" type="success" @click="addTyepe('t1')">{{ title }}</el-button>
        <el-tab-pane label="动态参数" name="0">
          <el-table :data="list" border>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template #default="{row}">
                <el-button @click="edit(row,'bianji')">编辑</el-button>
                <el-button @click="edit(row,'shanchu')">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane label="静态属性" name="1">
          <el-table :data="list2" border>
            <el-table-column label="参数名称" prop="attr_name"></el-table-column>
            <el-table-column label="操作">
              <template #default="{row}">
                <el-button @click="edit(row,'bianji2')">编辑</el-button>
                <el-button @click="edit(row,'shanchu2')">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { addGoods, deltGoods, editGoods, getCategories, getGoodsType } from '@/api/goods'

export default {
  data () {
    return {
      type: '',
      title: '添加动态参数',
      form: {
        attr_name: ''
      },
      dialogFormVisible: false,
      activeName: 0,
      catePropsl: {
        label: 'cat_name',
        children: 'children',
        value: 'cat_id'
      },
      id: '',
      attr_id: '',
      id3: '',
      attr_id3: '',
      value: [],
      attrs: [],
      list: [],
      list2: []
    }
  },
  created () {
    this.getCategories()
  },
  methods: {
    // 提交事件
    async submit () {
      if (this.title === '添加动态参数' && this.type === 't1') {
        const res = await addGoods(this.id, {
          attr_name: this.form.attr_name,
          attr_sel: 'many'
        })
        this.$message(res.meta.msg)
      } else if (this.title === '添加静态属性' && this.type !== 'bianji2') {
        const res = await addGoods(this.id, {
          attr_name: this.form.attr_name,
          attr_sel: 'only'
        })
        this.$message(res.meta.msg)
      }
      if (this.type === 'bianji' && this.type !== 'bianji2') {
        await editGoods(this.id, this.attr_id, {
          attr_name: this.form.attr_name,
          attr_sel: 'many'
        })
      }
      if (this.type === 'bianji2') {
        console.log(this.type)
        await editGoods(this.id, this.attr_id, {
          attr_name: this.form.attr_name,
          attr_sel: 'only'
        })
      }
      this.handleChange()
      this.getonly()
      this.dialogFormVisible = false
    },
    async getCategories () {
      const res = await getCategories()
      this.attrs = res.data
    },
    // 下拉保存数据value
    async handleChange () {
      const res = await getGoodsType(this.value[2], {
        sel: 'many'
      })
      this.list = res.data
      if (this.list.length > 0) {
        this.id = res.data[0].cat_id
        this.attr_id = res.data[0].attr_id
      } else {
        return this.$message.error('没有数据')
      }
    },
    handleClick () {
      if (this.activeName === '0') {
        this.title = '添加静态属性'
      } else if (this.activeName === '1') {
        this.title = '添加动态参数'
      }
    },
    // 添加动态参数
    async addTyepe (type) {
      this.type = type
      this.form.attr_name = ''
      if (this.value.length < 3) {
        return this.$message.error('请选择三级商品分类')
      }
      console.log(this.value[2])
      const res = await getGoodsType(this.value[2], {
        sel: 'many'
      })
      this.list = res.data
      if (this.list) {
        this.id = this.list[2].cat_id
        this.attr_id = this.list[2].attr_id
        this.dialogFormVisible = true
      } else {
        return this.$message.error('没有动态参数数据')
      }
    },
    async beforeleave (a, b) {
      if (b === '0' && this.value.length !== 3) {
        this.$message.error('请选择三级商品分类')
        return false
      }
      if (a === '1') {
        const res2 = await getGoodsType(this.value[2], {
          sel: 'only'
        })
        this.list2 = res2.data
        if (this.list2) {
          this.id3 = this.list2[2].cat_id
          this.attr_id3 = this.list2[2].attr_id
        } else {
          return this.$message.error('没有数据')
        }
      }
    },
    async getonly () {
      const res2 = await getGoodsType(this.value[2], {
        sel: 'only'
      })
      this.list2 = res2.data
    },
    async edit (row, type) {
      this.type = type
      if (this.type === 'bianji') {
        this.dialogFormVisible = true
        this.form.attr_name = row.attr_name
      }
      if (this.type === 'bianji2') {
        console.log(this.type)
        this.dialogFormVisible = true
        this.form.attr_name = row.attr_name
      }
      if (this.type === 'shanchu') {
        const res = await deltGoods(this.id, row.attr_id)
        this.$message(res.meta.msg)
      }
      if (this.type === 'shanchu2') {
        console.log(row)
        const res = await deltGoods(row.cat_id, row.attr_id)
        this.$message(res.meta.msg)
        this.getonly()
      }
      await this.handleChange()
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
